<template>
  <div>
    <div v-if="id === null">
      <div class="head">
        <van-image
          v-show="show"
          class="touxiang1"
          round
          width="3rem"
          height="3rem"
          src="https://img.yzcdn.cn/vant/cat.jpeg"
        />
        <van-icon
          @click="jumpSetting()"
          class="head_icon"
          name="setting-o"
          color="#F9F8FA"
          size="30"
        />&nbsp;&nbsp;&nbsp;
        <van-icon
          class="chat"
          name="chat-o"
          @click="jumpLogin()"
          color="#F9F8FA"
          size="30"
        />
      </div>
      <div class="tou">
        <van-image class="touxiang" round width="7rem" height="7rem" src="" />
        <span class="text" @click="jumpLogin()">请登录！</span>
        <!-- <van-icon class="arrow" name="arrow" size="30" color="#F9F8FA" /> -->
      </div>
      <div class="card1">
        <div class="card1-1" @click="jumpLogin()">
          <van-icon class="like" name="like-o" color="#72D7CA" size="30" />
          <p class="p3">我的关注</p>
        </div>
        <div class="card1-1" @click="jumpLogin()">
          <van-icon class="like" name="star-o" color="#4F79E1" size="30" />
          <p class="p3">我的收藏</p>
        </div>
        <div class="card1-1">
          <van-icon class="like" name="shop-o" color="#BE4FE1" size="30" />
          <p class="p3">应用管理</p>
        </div>
        <div class="card1-1">
          <van-icon class="like" name="photo-o" color="#E14FC3" size="30" />
          <p class="p3">主题风格</p>
        </div>
      </div>
      <p class="login_p1" @click="jumpLogin()">登录查看更多内容</p>
    </div>
    <div v-else>
      <div class="head">
        <van-image
          v-show="show"
          class="touxiang1"
          round
          width="3rem"
          height="3rem"
          :src="url"
        />
        <van-icon
          @click="jumpSetting()"
          class="head_icon"
          name="setting-o"
          color="#F9F8FA"
          size="30"
        />&nbsp;&nbsp;&nbsp;
        <van-icon
          class="chat"
          name="chat-o"
          @click="jumpNotice()"
          color="#F9F8FA"
          size="30"
        />
      </div>
      <div class="tou" @click="jumpDetail()">
        <van-image
          class="touxiang"
          round
          width="7rem"
          height="7rem"
          :src="url"
        />
        <span class="text">{{ username }}</span>
        <!-- <van-icon class="arrow" name="arrow" size="30" color="#F9F8FA" /> -->
      </div>
      <div class="card">
        <div class="card-1">
          <p class="p1">0</p>
          <p class="p2">动态</p>
        </div>
        <div class="card-1">
          <p class="p1">0</p>
          <p class="p2">关注</p>
        </div>
        <div class="card-1">
          <p class="p1">0</p>
          <p class="p2">粉丝</p>
        </div>
      </div>

      <div class="card1">
        <div class="card1-1" @click="jumpMyConcerns()">
          <van-icon class="like" name="like-o" color="#72D7CA" size="30" />
          <p class="p3">我的关注</p>
        </div>
        <div class="card1-1" @click="myCollection()">
          <van-icon class="like" name="star-o" color="#4F79E1" size="30" />
          <p class="p3">我的收藏</p>
        </div>
        <div class="card1-1">
          <van-icon class="like" name="shop-o" color="#BE4FE1" size="30" />
          <p class="p3">应用管理</p>
        </div>
        <div class="card1-1">
          <van-icon class="like" name="photo-o" color="#E14FC3" size="30" />
          <p class="p3">主题风格</p>
        </div>
      </div>
      <div @click="jumpInform()">
      <van-notice-bar
        class="inform"
        background="#f9f8fa"
        color="#4F79E1"
        left-icon="volume-o"
        :scrollable="true"
        text="发帖请参考[社区管理规范]>>>"
      />
    </div>
    <div class="care">
      <div class="p4">我关注的话题</div>
      <p class="p5">你还没有关注任何话题</p>
    </div>
    <div class="care">
      <div class="p4">我的收藏单</div>
      <p class="p5">你还没有创建收藏单</p>
    </div>
    <div class="foot"></div>
    </div>
    
  </div>
</template>
<script>
export default {
  data() {
    return {
      show: false,
      id: sessionStorage.getItem('roleId'),
      url: sessionStorage.getItem('src'),
      username: sessionStorage.getItem('username'),
    };
  },
  mounted() {
    window.addEventListener('scroll', this.windowScroll);
  },
  methods: {
    jumpLogin() {
      this.$router.push('/login');
    },
    // 我的收藏
    myCollection() {
      this.$router.push('/myCollection');
    },
    // 我的关注
    jumpMyConcerns() {
      this.$router.push('/myConcerns');
    },
    // 通知
    jumpNotice() {
      this.$router.push('/notice');
    },
    //   跳转到个人资料
    jumpDetail() {
      this.$router.push('/detail');
    },
    jumpSetting() {
      this.$router.push('/setting');
    },
    //   跳转到Inform
    jumpInform() {
      this.$router.push('/inform');
    },
    windowScroll() {
      // 滚动条距离页面顶部的距离
      // 以下写法原生兼容
      let scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;
      console.log(scrollTop);
      if (scrollTop >= 73) {
        this.show = true;
      } else {
        if (scrollTop < 73) {
          this.show = false;
        }
      }
    },
  },
  beforeDestroy() {
    window.removeEventListener('scroll', this.windowScroll);
  },
};
</script>
<style scoped>
.login_p1{
  font-size: 2rem;
  color: rgb(164, 164, 165);
  text-align: center;
  margin-top: 2rem;
}
.head {
  width: 100%;
  height: 6rem;
  position: sticky;
  background-color: rgb(108, 144, 243);
  top: 0;
  z-index: 5;
}
.head_icon {
  position: absolute;
  right: 5rem;
  top: 1.5rem;
}
.chat {
  position: absolute;
  right: 1rem;
  top: 1.5rem;
}
.tou {
  width: 100%;
  height: 12rem;
  background-color: rgb(108, 144, 243);
}
.touxiang {
  margin-left: 1.3rem;
}
.touxiang1 {
  margin-left: 1.3rem;
  margin-top: 1.5rem;
}
.text {
  color: #f9f8fa;
  position: relative;
  top: -2.7rem;
  left: 0.5rem;
  font-size: 2rem;
}
.arrow {
  position: relative;
  top: -1.7rem;
  left: 16.3rem;
}
.card {
  width: 100%;
  height: 6rem;
  margin: 0 auto;
  background-color: #f9f8fa;
  border-radius: 1rem;
  position: relative;
  top: -2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.card-1 {
  width: 30%;
  height: 6rem;
  margin-top: 1.4rem;
}
.p1 {
  font-size: 2.4rem;
  font-weight: bold;
  text-align: center;
}
.p2 {
  color: #adadad;
  text-align: center;
}
.card1 {
  width: 100%;
  height: 8rem;
  background-color: #f9f8fa;
  border-radius: 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.card1-1 {
  width: 25%;
  height: 8rem;
  margin-left: 0px;
  position: relative;
}
.p3 {
  text-align: center;
  margin-top: 1.8rem;
}
.like {
  position: relative;
  top: 1.5rem;
  left: 3.1rem;
}
.inform {
  width: 91%;
  border-radius: 1rem;
  margin-top: 2rem;
}
.care {
  width: 100%;
  height: 12rem;
  background-color: #f9f8fa;
  border-radius: 1rem;
  margin-top: 2rem;
  overflow: hidden;
}
.p4 {
  font-size: 1.8rem;
  font-weight: bold;
  margin-left: 1rem;
  margin-top: 1rem;
}
.p5 {
  text-align: center;
  color: #adadad;
}
.foot {
  width: 100%;
  height: 8rem;
}
</style>